<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <div>
        <Modal v-model='modal' title="用户绑定" :mask-closable='false' @on-cancel='canceledit(modalname)'>
            <Form :label-width='150' :ref='modalname' :model='modalparams' :rules='createRules'>
                <FormItem label='友情提示：'>
                    <font class="red">默认用户初始密码：jgwl123456</font>
                </FormItem>
                <FormItem label='项目：'>
                    <span>{{project}}</span>
                </FormItem>
                <FormItem label='姓名：'>
                    <p>{{modalparams.realname}}</p>
                </FormItem>
                <FormItem v-if="modalparams.is_manager != 1" label='角色：' prop='role_ids'>
                    <Select v-model="modalparams.role_ids" multiple :max-tag-count='3' style="width:280px" placeholder='请选择角色'>
                        <Option v-for="item in rolelist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem v-if="is_super == 1" label='设置项目管理员：'>
                    <RadioGroup v-model="modalparams.is_manager">
                        <Radio label="1">是</Radio>
                        <Radio label="0">否</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <div slot='footer'>
                <Button @click='canceledit(modalname)'>取消</Button>
                <Button @click='submitedit(modalname)' type='primary'>保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import { rbacmemberbindproject } from '@api/peoplesetting'
    import { getRoleList } from '@/api/powersetting.js';
    export default {
        name: '',
        components: {},

        data () {
            return {
                modalname: 'modalname',
                modal: false,
                project: '',
                is_super: 0,
                rolelist: [],
                modalparams: { id: 0, realname: '', role_ids: [], is_manager: '0' },
                createRules: {
                    role_ids: [{
                        required: false,
                        message: '请选择角色',
                        type: 'array',
                        trigger: 'change'
                    }]
                }
            };
        },
        mounted () {
            this.is_super = util.storage.get('is_super')
            let projectList = util.storage.get('project')
            let projectid = util.storage.get('currentProject')
            projectList.forEach(e => {
                if (e.value == projectid) {
                    this.project = e.name
                }
            })
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial (row) {
                getRoleList().then(res => {
                    this.rolelist = res
                })
                this.$refs[this.modalname].resetFields();
                this.modalparams = { id: 0, realname: '', role_ids: [], is_manager: '0' }
                this.askData(row)
            },
            askData (row) {
                this.modal = true
                this.modalparams.id = row.id
                this.modalparams.realname = row.realname
                this.modalparams.role_ids = row.role_id_arr
                this.modalparams.is_manager = row.is_manager + ''
            },
            canceledit (name) {
                this.$refs[name].resetFields();
                this.modal = false
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let params = {
                            member_id: this.modalparams.id,
                            is_manager: this.modalparams.is_manager,
                            role_ids: this.modalparams.role_ids.join(',')
                        }
                        rbacmemberbindproject(params).then(() => {
                            this.$Message.success('绑定成功')
                            this.modal = false
                            this.$emit('askData')
                        })
                    }
                })
            }
        }
    }
</script>
